<template>
    <div class="app-container">
        <levelbar></levelbar>
        <div class="author-wrapper">
            <div class="box">
            <el-form class="app-content" ref="ruleForm" label-width="116px" :model="ruleForm" :rules="rules">
                <div class="app-title"><h3>添加权限</h3></div>  
                <div class="app-top">角色与备注</div>
                <el-row :gutter="21" class="formAuthor">
                    <el-col :span="8" style="margin-left:0">
                        <el-form-item label="权限角色名称" prop="sName">
                            <el-input v-model="ruleForm.sName" placeholder="请输入权限角色名称" :maxlength="20"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" style="margin-left:0">
                        <el-form-item label="备注信息" prop="sDesc">
                            <el-input v-model="ruleForm.sDesc" placeholder="请输入备注信息" :maxlength="20"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-form class="app-content">
                <div class="app-top">权限选择</div>
                
                    <el-row :gutter="21">
                        <div class="authority-list-wrapper">
                            <tree-author 
                                v-for="(item,index) in authorTreeData"
                                :model="item"
                                :key="item.id"
                                :index="index"    
                            ></tree-author> 
                        </div>
                    </el-row>
                    <el-form-item class="footer">
                        <el-button @click="cancelForm">返回</el-button>
                        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                    </el-form-item>
            </el-form>
            </div>
        </div>
       
    </div>
</template>
<script>

import { getListSysMenuByOperator, saveSysRole } from 'api/system';
import Levelbar from '../../layout/Levelbar';
import TableLayout from 'components/TableLayout';
import { mapGetters } from 'vuex';
import treeAuthor from './comps/treeAuthor'
export default {
    name: 'addAuthor',
    data() {
        return {
            ruleForm: {
                sName: '',
                sDesc: '',
                menuList: []
            },
            rules: {
                sName: [
                    { required: true, message: '请输入权限角色名称', trigger: 'blur' },
                    { max: '20', message: '字符长度不大于20个！', trigger: 'change' }
                ],
                sDesc: [
                    { required: true, message: '请输入备注信息', trigger: 'blur' },
                    { max: '20', message: '字符长度不大于20个！', trigger: 'change' }
                ]
            },
            oldData: [],
            authorTreeData: []
        };
    },
    computed: {
        // 获取用户id
        ...mapGetters(['uid'])
    },
    created() {
        this._getListSysMenuByOperator();
    },
    methods: {
        submitForm(ruleForm) {
            console.log(this.authorTreeData);
            this.$refs[ruleForm].validate(valid => {
                if (valid) {
                    this._saveSysRole();
                } else {
                    return false;
                }
            });
        },
        getCheckId(data) {
            var menuList = [];
            // var res =[];
            data.forEach(item => {
                menuList.push({'id': item.id, 'checked': (item.checked === null ? false: item.checked)});
                if (item.children) {
                    var res = this.getCheckId(item.children);
                    menuList = menuList.concat(res);
                }
            })
            return menuList;
        },  
        // 获得操作者拥有的系统菜单
        _getListSysMenuByOperator() {
            // var instId = this.uid;
            getListSysMenuByOperator().then(response => {
                console.log(response);
                this.authorTreeData = this.treeData(response.data.content, null, 1); // 原始数据结构 
                this.oldData = response.data.content
            });
            
        },
        _saveSysRole() {
            // TODO schoolId
            // var instId = this.uid;
            this.ruleForm.instId = 0;

            this.ruleForm.menuList = this.getCheckId(this.authorTreeData);
            console.log(this.ruleForm);
            if (!this.ruleForm.menuList.some((menu, index) => {
                return menu.checked == true;
            })) {
                this.$message({
                    message: '请至少选中一个界面权限',
                    type: 'info'
                });
                return;
            }
            saveSysRole(this.ruleForm).then(res => {
                this.$message({
                    message: '角色添加成功！',
                    type: 'success'
                });
                this.$router.push({
                    path: '/authority'
                });
                this.$store.dispatch('UpdateCache');
            });
        },
        treeData(data, parentId, level) {
            let result = [];
            let temp;
            
            for (let i = 0; i < data.length; i++) {
                if (data[i].parentId == parentId) {
                    let obj = {
                        menuName: data[i].menuName,
                        id: data[i].id,
                        checked: data[i].checked,
                        selected: false,
                        level,
                        checkEnabled: data[i].checkEnabled
                    };
                    temp = this.treeData(data, data[i].id, level + 1);
                    if (temp.length >= 0) {
                        obj.children = temp;
                    }
                    result.push(obj);
                }
            }
            return result;
        },
        // 取消
        cancelForm() {
            this.$router.go(-1);
        }
    },
    components: {
        Levelbar,
        TableLayout,
        treeAuthor
    }
};
</script>
<style rel="stylesheet/scss" lang="scss">
.app-container {
  padding-bottom: 0;
  .author-wrapper {
      overflow: hidden;
  }
  .box {
    padding: 0px 50px 40px;
    background: #fff;
  }
  .app-title {
    text-align: center;
    font-size: 18px;
    color: #333;
    height: 78px;
    line-height: 78px;
    font-weight: bold;
    border-bottom: 1px solid #ddd;
    margin-bottom: 15px;
  }
  .formAuthor {
    padding-bottom: 5px;
  }
   .app-top {
    font-size: 14px;
    text-indent: 16px;
    border-left:4px solid #ff5e2c;
    height: 14px;
    line-height: 14px;
    margin:40px 0px;
  }
}
.footer {
  text-align: center;
  margin-top: 60px;
  .el-button {
    width: 120px;
    height: 40px;
    margin: 0 20px;
  }
}
</style>
